<template>
  <a-modal v-model:open="visible" @ok="okClick" @cancel="cancelClick" :afterClose="onClosed">
    <span>antd modal</span>

    <!--
    <a-button @click="okClick"> 确定 </a-button>
    <a-button @click="cancelClick"> 取消 </a-button>
    -->
  </a-modal>
</template>

<script lang="ts" setup>
import { onUnmounted, ref } from 'vue'

const visible = ref(true)
const emit = defineEmits(['ok', 'cancel', 'closed'])

const onClosed = () => {
  console.log('closed in dialog')
  emit('closed')
}

const okClick = () => {
  emit('ok')
  visible.value = false
}

const cancelClick = () => {
  emit('cancel')
  visible.value = false
}

onUnmounted(() => {
  console.log('unmounted in dialog')
})
</script>
